<template>
    <div>
        <button @click="show = !show">隐藏/显示</button>
        <p v-test="show">这是自定义指令</p>
        <p v-hide="show">这是局部自定义指令</p>
    </div>
</template>
<script setup>
/**
 * 自定义指令的写法：
 *      全局
 *      app.directive('自定义指令名称',{})
 *      局部：在setup的顶级写v-开头的变量
 *      directives:{
 *          '自定义指令名称':{}
 *      }
 * 
 *      
 */
import { ref } from 'vue'

//全局自定义指令
//D:\opt\omss\demo\src\directives\index.js   在main.js引入
const show = ref(false)


//局部自定义指定
const vHide = {
    //这里面写钩子
    mounted(el, binding) {
        if (binding.value) {
            el.style.display = "none";
        } else {
            el.style.display = "";
        }
    },
    updated(el, binding) {
        if (binding.value) {
            el.style.display = 'none';
        } else {
            el.style.display = '';
        }
    }
}


</script>


<style>
    
</style>